<template>     
  <div>
    <h5 class="content-header"> </h5>
    <div class="image-list">
      <div style="text-align:center" ref="divGenres" class="list-default-img" v-show="isPhoto" @click.stop="addPic">
        <img src="../../assets/icon_photo.jpg" />
        <br>
        <span>请选择或者拍照上传照片</span>
        <input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" capture="camera" @change="onFileChange" style="display: none;">
      </div>
      <ul class="list-ul" v-show="!isPhoto">
        <li class="list-li" v-for="(item, index) in imgUrls" :key="index">
          <a class="list-link" @click='previewImage(item)'>
            <img :src="item">
          </a>
          <span class="list-img-close" @click='delImage(index)'></span>
        </li>
        <li class="list-li">
          <span class="add-img" @click.stop="addPic"> </span>
        </li>
      </ul>
    </div>
    <!-- <div class="add-preview" v-show="isPreview" @click="closePreview">
      <img :src="previewImg">
    </div> -->
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" v-show="isPreview" @click="closePreview">
            <!-- 遮罩层 -->
            <div class="img-layer"></div>
            <div class="img">
                    <img :src="previewImg">
            </div>
        </div>
    </transition>
    <div class="bottom_fiexd" @click="saveImage">
        文件上传
    </div>
  </div>
</template> 
<script>
import lrz from "lrz"

export default {
    name: "uploadFile",
    data() {
        return {
            show: false,
            imgUrls: [],
            urlArr: [],
            isPhoto: true,
            btnTitle: '',
            isModify: false,
            previewImg: '',
            isPreview: false
        };
    },
    created: function() {

    },
    watch: {
      imgUrls: 'toggleAddPic'
    },
    methods: {
        toggleAddPic: function () {
            if (this.imgUrls.length >= 1) {
                // 隐藏点击拍第一张照片DOM，显示继续拍照的DOM
                this.isPhoto = false;
            } else {
                // 隐藏继续拍照的DOM，显示击拍第一张照片DOM
                this.isPhoto = true;
            }
        },
        // 点击拍照或选择图片 
        addPic: function (e) {
            let els = this.$refs.divGenres.querySelectorAll('input[type=file]')
            els[0].click()
            return false
        },
        onFileChange: function (e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.createImage(files, e);
        },
        createImage: function (file, e) {
            let vm = this;
            // lrz(file, [options]);    lrz(file[0], {width: 480})
            //     file： 通过 input:file 得到的文件，或者直接传入图片路径。
            //     [options] ：这个参数允许忽略。
            //         width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度；
            //         height {Number} 同上；
            //         quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7；
            //         fieldName {String} 后端接收的字段名，默认：file；
            // 返回结果是一个promise对象，有then()、catch()、always三个方法。
            // then(rst)：
            //      rst.formData 后端可处理的数据；
            //      rst.file 压缩后的file对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象；
            //      rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整；
            //      rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64；
            //      rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)；
            //      rst.origin 也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等；
            // catch(err) 、always() 
            lrz(file[0], {width: 480}).then(function (rst) {
                    // 在imgUrls数组中添加基于base64格式的图片
                    // 不可使用 this.imgUrls.push
                    vm.imgUrls.push(rst.base64);
                    return rst;
                }).always(function () {
                    // 清空文件上传控件的值
                    // 由于我们可能持续点击拍照上传图片，使用在alway回调函数里面必须清空上传控制的值。
                    e.target.value = null;
                });
        },
        delImage: function (index) {
            this.$dialog.confirm({
                    title: '确认',
                    mes: '确定删除该图片？',
                    opts: [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                                // 什么也不处理
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                this.imgUrls.splice(index, 1);
                                // 如有预览大图展示时，也要将其关闭
                                if (this.isPreview) {
                                    this.closePreview();
                                }
                            }
                        }
                    ]
                });
        },
        previewImage: function (url) {
            this.isPreview = true;
            // 大图预览就是将base64格式的图片直接放进预览DOM的img src中放大展示
            this.previewImg = url;
        },
        closePreview: function () {
            this.isPreview = false;
            // 点击图片自身关闭预览，清空img src资源。
            this.previewImg = "";
        },
        saveImage: function () {
            this.$dialog.loading.open('请稍后');
            let urlArr = [];
            // 压缩成base64字符串是“data:image/jpeg;base64,~~”的字符串            
            for (let i = 0; i < this.imgUrls.length; i++) {
                if (this.imgUrls[i].indexOf('file') == -1) {
                    // 将“data:image/jpeg;base64,"截取掉，只传递给后端逗号后面的base64字符串
                    urlArr.push(this.imgUrls[i].split(',')[1]);
                } else {
                    urlArr.push(this.imgUrls[i]);
                }
            }
            
            //数据传输操作
            // 使用this.$httpAjax.post时、报 HttpMediaTypeNotSupportedException
            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'other/uploadPic', urlArr)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            this.$dialog.toast({
                                mes: '上传成功',
                                icon: 'success',
                                timeout: 600
                            });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 600);
                        } else {
                            this.$dialog.toast({
                                mes: '上传失败，请稍后重试',
                                icon: 'error',
                                timeout: 600
                            });
                        }
                    } else {
                        this.$dialog.toast({
                            mes: '上传失败，请稍后重试',
                            icon: 'error',
                            timeout: 600
                        });
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    window.alert(error);
                });
        }
    }
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
  .list-ul {
    /* 去掉ul前面的符号 */
    list-style: none;
    /* 与外界元素的距离为0 */
    margin: 0px;
    /* 与内部元素的距离为0 */
    padding: 0px;
    /* 宽度根据元素内容调整 */
    width: auto;
  }

  /* 所有class为menu的div中的ul中的li样式 */
  .list-li {
    /* 向左漂移，将竖排变为横排 */
    padding: 8px;
    /* 与内部元素的距离为0 */
    display: inline-block;
    position: relative;
    text-align: center;
  }

  .list-link img {
    width: 100px;
    height: 100px;
  }

  /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */

  .list-link a:visited {
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    /* 此元素将显示为块级元素，此元素前后会带有换行符 */
    display: flex;
    line-height: 1.35em;
    /* 内部填充的距离 */
    padding: 4px 20px;
    /* 不显示超链接下划线 */
    text-decoration: none;
    /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
    white-space: nowrap;
    overflow: hidden;
  }

  /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
  .list-link a:hover {
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
  }

  /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
  .list-link a:active {
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
  }

  .list-img-close {
    background: #ffffff url(../../assets/icon_del.jpg) no-repeat right top;
    border-color: #ff4a00;
    background-position: center;
    background-size: 35px 35px;
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 5%;
    left: 81%;
    margin-top: 0px;
    margin-left: 0px;
    padding: 8px;
    z-index: 10;
    border-radius: 5px;
    text-align: center;
  }

  .add-img {
    display: block;
    background-image: url('../../assets/add_img.png');
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    background-position: center;
    background-size: 100px 100px;
  }
  
  
/*动画*/
/* 变化成什么样  ->  当元素出来(显示)*/
.fade-enter-active, .fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
}
/* 初始状态，  变成成什么样   -> 当元素离开(消失) */
.fade-enter, .fade-leave-active {
    transform: translate3D(100%, 0, 0);
}

.img-view {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*不限制图片大小，实现居中*/
.img-view .img img {
    max-width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
}

.bottom_fiexd {
    position: fixed;
    width: 100%;
    height: 0.9rem;
    left: 0;
    bottom: 0;
    background: #FB6C68;
    color: #fff;
    line-height: 0.9rem;
    text-align: center;
    font-size: 14px;
    z-index: 99;
}
</style>